<template>
  <div class="show-shopping" >
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="商品信息" name="currentShop">
        <div class="main1">
          <div class="left">
            <el-image
              style="width: 90px; height: 90px"
              :src="currShopMsg.imageUrl"
              fit="fill">
              <div slot="error" class="image-slot" style="text-align:center;border: 1px solid #ccc;height: 82px;">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <div class="right">
            <div class="sub-title">{{currShopMsg.name}}</div>
            <div class="sub-item"><span class="grey-color1">平台价：</span><span class="pink">¥{{currShopMsg.price}}</span></div>
            <div class="line-one">
              <span class="grey-color1">备注：</span>
              <span class="main-color">{{currShopMsg.desc}}</span>
              <el-button plain size="mini" class="fr" v-if="currShopMsg.otherInfo && tabType === 'webchat_todo'" @click="sendShopMsg">{{$t('webchat.send')}}</el-button>
            </div>
          </div>
          <div v-if="currShopMsg.otherInfo" class="otherInfo">
            <div v-for="(item, index) in currShopMsg.otherInfo" :key="index" class="otherInfoBox">
              <span class="otherName">{{item.key}}:</span>
              <span class="otherValue">{{item.value}}</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="订单信息" name="orderInfo">
        <orderInfoCard v-for="(item, index) in orderInfo" v-show="isShowOrderInfo" :isShowSendBtn="true" :goodsInfo="item" :key="index"></orderInfoCard>
      </el-collapse-item>
    </el-collapse>
    <!--<div class="content">-->
      <!--<div class="line-one"><div class="detail-title grey-color1">系统:</div><span class="content-item main-color">支持改装，着急保修</span></div>-->
      <!--<div class="line-one"><div class="detail-title grey-color1">商品信息:</div><span class="content-item main-color">支持改装，着急保修</span></div>-->
    <!--</div>-->
    <!--<div class="line"> </div>-->
    <!--<div class="title">商品浏览器记录<span class="title-right fr"><i class="el-icon-arrow-up" @click.stop="modalTwo = false" v-if="modalTwo"></i><i v-else class="el-icon-arrow-down" @click.stop="modalTwo = true"></i></span></div>-->
    <!--<div class="main2">-->
      <!--<div class="list-item">-->
        <!--<div class="left"></div>-->
        <!--<div class="right">-->
          <!--<div class="sub-title">55英寸 AI声控 MEMC防抖 超薄全面v 结婚的饭局 v 疯狂的；v 地方，从监控上看考场实地考察，参加实地考察结束对抗，屏， 4K超高清</div>-->
          <!--<div class="pink">¥3,999.00</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="title">商品浏览轨迹<span class="title-right fr"><i class="el-icon-arrow-up" @click.stop="modalThreee = false" v-if="modalThreee"></i><i v-else class="el-icon-arrow-down" @click.stop="modalThreee = true"></i></span></div>-->
    <!--<div class="">-->
      <!--<ul class="circlelist-table">-->
        <!--<li>-->
          <!--<span class="circle-icon pink"></span>-->
          <!--<el-row class="border-col">-->
            <!--<div class="track-msg">-->
              <!--<div><span>21:49:07</span><span class="stop-time">停8487'08"</span></div>-->
              <!--<div class="main2" style="margin-bottom: 0px;padding-top: 5px">-->
                <!--<div class="list-item" style="border-bottom: none">-->
                  <!--<div class="left"></div>-->
                  <!--<div class="right" style="background-color: #F5F5F5;">-->
                    <!--<div class="sub-title">55英寸 AI声控 MEMC防抖 超薄全面v 结婚的饭局 v 疯狂的；v 地方，从监控上看考场实地考察，参加实地考察结束对抗，屏， 4K超高清</div>-->
                    <!--<div class="pink">¥3,999.00</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</el-row>-->
        <!--</li>-->
        <!--<li>-->
          <!--<span class="circle-icon pink"></span>-->
          <!--<el-row class="border-col">-->
            <!--<div class="track-msg">-->
              <!--<div><span>21:49:07</span><span class="stop-time">停8487'08"</span></div>-->
              <!--<div class="main2" style="margin-bottom: 0px;padding-top: 5px">-->
               <!--[购物车]购物车-->
              <!--</div>-->
            <!--</div>-->
          <!--</el-row>-->
        <!--</li>-->
      <!--</ul>-->
    <!--</div>-->
  </div>
</template>
<script>
  import bus from '@/store/eventBus'
  import orderInfoCard from '@/components/business-modules/webchat/base/orderInfoCard'
  export default {
    name: 'shopping',
    data () {
      return {
        currShopMsg: {
          price: '0.00',
          imageUrl: '',
          name: '',
          desc: ''        
        },
        isShowOrderInfo: true,
        orderInfo: [],
        modalOne: true,
        modalTwo: true,
        modalThreee: true,
        activeNames: ['currentShop', 'orderInfo']
      }
    },
    components: {
      orderInfoCard
    },
    computed: {
      tabType () {
        return this.$route.path.split('/')[3] || ''
      }
    },
    props: {
      chatInfo: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      'chatInfo._id' () {
        let val = this.chatInfo.commodityId
        if (val) {
          this.fetchData(val)
        } else {
          this.currShopMsg = {
            price: '0.00',
            imageUrl: '',
            name: '',
            desc: ''
          }
        }
        let orderId = this.chatInfo.orderId
        if (orderId) {
          this.getOrderInfo(orderId)
        } else {
          this.isShowOrderInfo = false 
        }
      }
    },
    methods: {
      fetchData (val) {
        let data = {
          commodityId: val,
          systemAccount: this.chatInfo.systemAccount
        }
        this.$store.dispatch('getCommodityInfo', data).then((rep) => {
          if (rep.success) {
            this.currShopMsg = rep.data
          }
        })
      },
      getOrderInfo (orderInfoId) {
        let data = {
          orderId: orderInfoId,
          systemAccount: this.chatInfo.systemAccount
        }
        this.$store.dispatch('getOrderInfo', data).then((rep) => {
          if (rep.success) {
            this.orderInfo = rep.data
            this.isShowOrderInfo = true
          } else {
            this.isShowOrderInfo = false
          }
        })
      },
      sendShopMsg () {
        bus.$emit('sendShopMsg', this.currShopMsg)
      },
      handleChange () {}
    },
    beforeMount () {
    },
    mounted () {
      const val = this.chatInfo.commodityId || ''
      if (val) {
        this.fetchData(val)
      }
      const orderInfoId = this.chatInfo.orderId
      if (orderInfoId) {
        this.getOrderInfo(orderInfoId)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .image-slot
    .el-icon-picture-outline
      font-size: 30px;
      color: #ccc;
      line-height: 88px;
  .circlelist-table
    font-size  12px
    line-height  12px
    li
      color $cf-gray3
      position relative
      line-height 16px
      .circle-icon
        display  block
        width  11px
        height  11px
        border-radius  50%
        position  absolute
        float  left
        left -5px
        z-index 2
        top 1px
        background-color $c-pink
      .track-msg
        border-left: 1px solid #ccc;
        padding-left: 16px;
        .stop-time
          margin-left 10px
          color #FF9100
      &:last-of-type
        .track-msg
          border-left: none
  .show-shopping
    padding 18px 16px
    .line
      height 1px
      width 100%
      background-color #D9D9D9
      margin-bottom 10px
    .main-color
      color: #000
    .pink
      color $c-pink
    .grey-color1
      color #878787
  .title
    clear both
    font-size 14px
    font-weight bold
    color #595959
    margin-bottom 18px
  .content
    clear both
    margin 20px 0px
    background-color #F5F5F5
    padding 15px 10px
    .line-one
      line-height 20px
    .detail-title
      display inline-block
      width 70px
  .main1
    clear both
    overflow hidden
    font-size 12px
    font-weight 500
    .left
      float: left;
      height: 88px;
      width: 88px;
      margin-right: 10px;
    .right
      .sub-item
        margin-bottom 10px
      .sub-title
        line-height: 16px;
        margin-bottom 4px
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
      .line-one
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
  .main2
    margin-bottom 10px
    .list-item
      padding-bottom: 16px;
      border-bottom: 1px solid #D9D9D9;
    .left
      float: left;
      height: 56px;
      width: 56px;
      margin-right: 10px;
      border: 1px solid #ccc;
    .right
      .sub-title
        line-height: 16px;
        margin-bottom 9px
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
  .otherInfo
    width 100%
    background #FAFAFA
    margin-top 15px
    padding 5px
    .otherInfoBox
      margin 5px
      width 100%
    .otherName
      margin-right 24px
      color #878787
      max-width 30%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      display inline-block
    .otherValue
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      max-width 60%
      display inline-block
</style>
<style lang="stylus">
  .show-shopping > .el-collapse
      border-top none
    .el-collapse-item__header
      font-size 14px
      color #595959
      font-weight 800
</style>

